<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 500px;
            width: 500px;
            background-color: magenta;
            margin: 0 auto;
            overflow: auto;
        }
        /*滑块的长度是根据超出内容的多少来判定的，如果超出的很多，滑块就短，超出的很少，滑块就会很长，甚至跟整个轨道同样长*/
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid vitae quibusdam labore corporis molestias. Natus totam nostrum culpa, quasi distinctio aspernatur dignissimos expedita velit provident quidem harum quaerat magni, fugit saepe unde. Velit aliquam dignissimos voluptates cumque nobis exercitationem veniam! Illum veritatis facere harum enim explicabo debitis accusantium assumenda fuga dicta magnam. Cupiditate laudantium impedit repellat deserunt magni repudiandae adipisci, quisquam expedita ratione ex, sed, reiciendis aut. Eligendi delectus earum excepturi maiores aperiam voluptates quod eius voluptatum! Expedita, culpa vero eveniet facilis magnam recusandae velit maxime enim accusamus alias beatae explicabo ipsum quibusdam eaque laborum sint facere? Blanditiis necessitatibus eaque eveniet harum nulla facere quod! Asperiores quae atque magni error architecto perspiciatis sint doloribus facilis odio molestiae beatae impedit totam quas, molestias autem aperiam ad ratione fuga iste natus sunt laudantium? Totam, reprehenderit nesciunt? Magnam accusantium dignissimos deleniti nesciunt, earum non consequuntur soluta consectetur corrupti distinctio doloribus temporibus unde, totam officiis! Quibusdam, exercitationem ad, vitae facere debitis ratione, adipisci amet corrupti expedita nostrum eligendi quisquam dolor est quia distinctio animi itaque doloremque similique reiciendis quidem veniam quos dolorum. Error laudantium alias exercitationem optio reiciendis ab dolorem tempora laborum, repellat accusantium sit saepe in. A alias quis repellat iusto nostrum ullam velit, aut dolorem eligendi, nisi hic tempora vero eius! Laborum quod consequuntur et autem tempore exercitationem, iure sapiente voluptates recusandae corrupti eum sit, natus sunt repellat ipsam libero ipsum inventore consequatur beatae porro culpa perferendis dignissimos nihil praesentium! Repellendus sint porro eos! Voluptas facilis iure soluta molestiae vero tempora excepturi consequuntur! Maxime inventore nihil, magnam at eligendi, quidem dicta dolorem mollitia quo dolore, tenetur vero perspiciatis temporibus! Saepe adipisci, aspernatur odio recusandae quaerat nesciunt aliquam dolores quis, tempore eligendi iusto incidunt ipsam iure minus at voluptas quo nobis blanditiis dolorum harum! Nemo, sed voluptatum ipsa possimus culpa minus laudantium at error architecto ratione, libero blanditiis suscipit, ab incidunt et sint delectus fugit eum nisi recusandae harum non reprehenderit. Animi quam voluptatum expedita, consequatur praesentium cum ipsam eligendi quos optio earum reprehenderit, officiis eveniet, labore voluptates dolorem facere deserunt aut sapiente illo delectus laborum consectetur quaerat dicta nulla? Excepturi, deleniti. Quidem ex ratione corporis. Maxime aut sunt sed perspiciatis itaque, veniam praesentium? Velit reiciendis veritatis itaque. Unde laborum est veritatis, repellendus nulla sapiente molestias nam, quas placeat soluta architecto odio eius tenetur illum debitis quidem, explicabo quae maxime eligendi dolorum minima culpa. Accusamus nam quos expedita pariatur mollitia sapiente, reiciendis reprehenderit? Culpa maiores dolore sequi odit alias consequatur nisi modi dicta officiis. Exercitationem, perferendis facere aperiam in et earum. Quisquam ratione incidunt corrupti quas suscipit amet, illum laborum commodi doloribus, dolorum sint esse in? Quos cum deleniti assumenda enim aperiam, quidem quam minus earum, eligendi, reprehenderit impedit ab adipisci. Placeat officiis praesentium in iusto expedita nemo veritatis sequi ducimus ratione, deserunt recusandae ad, ut nisi nulla minus doloribus eos. Assumenda laboriosam facilis fugit ipsa deleniti, quibusdam minus eos odio inventore architecto incidunt, voluptates ratione vel! Dolorem reiciendis ipsam provident, voluptatum vel iste exercitationem repellendus libero. Quo, corporis neque corrupti dignissimos ipsa enim nisi officiis. Minus voluptates corporis fuga, pariatur temporibus autem alias dolorum, maxime doloremque sit quibusdam provident? Distinctio repellendus officia harum delectus quia ipsum maxime doloremque, quod nihil veritatis inventore officiis aliquid necessitatibus doloribus iste autem totam nobis architecto. Nobis ipsa quas explicabo beatae, tenetur ut quasi voluptatum quo a? Eligendi saepe tempora architecto ea, perferendis maxime amet veritatis reiciendis non, tenetur dolorum sapiente doloribus nihil nesciunt nemo accusamus illo neque eum ipsa iste quaerat! Praesentium vero, rerum cupiditate beatae voluptatibus deserunt id ipsum quod quos amet error molestiae magni, dolorum facere debitis ullam eligendi voluptates cum dolores explicabo impedit, delectus consectetur? Illo commodi voluptatem quaerat consequatur delectus qui iste, minus sequi corrupti earum hic sint accusantium dolorem eligendi voluptas molestias veniam aliquam ea inventore ex voluptates saepe! Incidunt illum omnis dicta neque exercitationem fugiat, ratione aliquid sapiente natus voluptatem labore enim necessitatibus nam dolor facere maiores facilis earum voluptatibus laborum? Rerum, quisquam excepturi dolores distinctio optio tenetur voluptatum at tempora odio, minima asperiores sapiente illo velit incidunt ipsum cupiditate dicta sed, nulla possimus dolorum enim! Nemo dicta unde et, blanditiis animi recusandae alias, tenetur sit ratione voluptatum illum laboriosam nostrum! Iste illo nisi, consectetur sit qui nesciunt ullam excepturi dolor facere aliquam, velit esse amet at placeat adipisci et iure beatae voluptas ipsum. Provident ducimus soluta beatae velit iste quasi placeat laborum aperiam repudiandae facere commodi veniam earum fuga in quo cumque tempora quam voluptatem, rem delectus. Nihil expedita consequatur commodi reprehenderit illum similique cum! Ipsa iste, repudiandae assumenda labore vitae possimus explicabo, quisquam officiis nulla, sed laudantium natus soluta sequi voluptates impedit dolore nostrum voluptatibus in fuga dignissimos repellendus odio inventore cum enim. Dolor natus ut sit id nam reiciendis qui nostrum aliquam et vitae illum maxime mollitia nesciunt minus possimus ipsum, ipsa nemo architecto quos vel repudiandae! Perspiciatis nihil qui, eligendi inventore fugit soluta ea enim sunt quae aut nisi, ipsam harum eius adipisci, id reprehenderit nemo aspernatur repudiandae. Amet hic, sunt assumenda unde iure aliquid iste dolore in doloribus incidunt, harum alias commodi. Dolorum, in? Laborum, amet. Voluptate velit consequuntur qui enim quod iure ut reprehenderit aperiam hic exercitationem dolores, ex reiciendis veniam aspernatur sint corporis magni recusandae ipsam magnam nisi aut repudiandae placeat. Vel culpa voluptates perferendis numquam accusantium quaerat? Explicabo, optio odit? Quo deserunt id voluptas pariatur dolorum. Minima nulla vel quasi! Quae facilis est dolore aliquam ipsa, assumenda eaque tenetur, vel iure voluptates ad nobis, nisi dicta aperiam! Accusantium dolores impedit nesciunt quidem ad adipisci nisi placeat perferendis. Perspiciatis fugit velit voluptate ducimus nisi ea facilis neque consectetur sint excepturi tempora, accusantium praesentium nostrum explicabo molestiae adipisci nesciunt eos ipsam corporis culpa cupiditate impedit obcaecati! Doloribus eos esse et tempore molestias totam illo earum consequatur placeat eius est vero accusantium exercitationem pariatur repellendus animi, neque corporis sit cum. Sequi, nisi sed necessitatibus sint voluptate non tempora, quo laborum animi, sapiente a voluptatibus soluta atque similique distinctio natus accusantium voluptatum dolorum provident est vero eius accusamus voluptatem. Sequi quas fugiat mollitia saepe autem perferendis!</div>
</body>
</html>